<template>
  <my-slide
    v-bind:style="{ height: miniHeight + 'px', boxShadow: '0px 0px 2px #888888' }"
    v-ratio="{ ratio:ratio, fixed: 'height', keep: true }"
  ></my-slide>
</template>
<script>
import MySlide from '@/components/MySlide.vue'

export default {
  data () {
    return {
    }
  },
  computed: {
    ratio () {
      return this.$store.state.ratio
    },
    getInnerHeight () {
      return this.$store.state.innerHeight
    },
    getInnerWidth () {
      return this.$store.state.innerWidth
    },
    miniHeight () {
      return Math.floor(Math.min(this.getInnerHeight - 150, (this.getInnerWidth - 280) * 9 / 16))
    }
  },
  components: {
    MySlide
  }
}
</script>

<style scoped>
</style>
